<template>
  <div>
    <div @click="openCityPicker" class="row-col-center">
      <q-icon icon="map-fill" size="14" class="mb-nm"/>
      <div v-if="value" class="q-tag-warn bd-round row-col-center">
        <template v-if="value.adCode">
          {{ value.provinceName }}
          <template v-if="value.cityName">
            -{{ value.cityName }}
          </template>
          <template v-if="value.districtName">
            -{{ value.districtName }}
          </template>
        </template>
        <text v-else>
          {{ value.adName }}
        </text>
      </div>
      <div v-else>中国</div>
    </div>
    <q-city-picker v-if="picker" ref="cityPicker" :value="value" @input="input"></q-city-picker>
  </div>
</template>

<script lang="ts">
import {Component, Emit, Prop, Vue} from 'vue-property-decorator'
import DistrictVO from '@/socialuni/model/DistrictVO'
import QIcon from '@/qing-ui/components/QIcon/QIcon.vue'
import QCityPicker from '@/components/QCityPicker/QCityPicker.vue'

@Component({
  components: {
    QCityPicker,
    QIcon
  }
})
export default class SocialCityInfo extends Vue {
  $refs: {
    cityPicker: QCityPicker
  }

  @Prop() value: DistrictVO

  @Prop({
    default: false
  }) picker: boolean

  openCityPicker() {
    if (this.picker) {
      this.$refs.cityPicker.open()
    }
  }

  @Emit()
  input(value: DistrictVO) {
    return value
  }
}
</script>
